<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()">
        场地档期
    <a class="mores" slot="more-icon" @click="more">我的预约</a>
    </nut-navbar>

    <div class="field">
        <ul>
            <li v-for="(item,index) in fieldList" :key="index"  :class="activeClass == index ? 'active':''"  @click="getItme123(index,item.venue_id,item.parent_id,item.venue_title)">
                <div class="flex-content">{{item.venue_title}}</div>
            </li>
        </ul>

        <div  v-for="(item,index) in fieldList" :key="index" class="field_content" :class="activeClass == index ? 'active':''" @click="gotoSchedule(item.venue_id)">
            <nut-col :span="5">
                <img src="../../assets/icon/goods.png" alt="">
            </nut-col>
            <nut-col :span="19">
                <div class="title-content">
                    <nut-col :span="24">
                        {{item.venue_title}}    
                    </nut-col>
                    <div class="title-l">
                        <nut-col :span="8">
                            {{item.site_floor}}层
                        </nut-col>
                        <nut-col :span="8">
                            {{item.site_area}}平
                        </nut-col>
                        <nut-col :span="8">
                            {{item.site_size}}人
                        </nut-col>
                    </div>
                    <div class="more">
                        <nut-col :span="24">
                            查看更多 >
                        </nut-col>
                    </div>
                </div> 
            </nut-col>
        </div>
    </div> 
    <!-- 场地选择 -->

    <div class="field_calendar">
        <nut-calendar 
            :is-visible="isVisible3"
            :default-value="date3"
            type="one"
            :end-date="enddata"
            :animation="`nutSlideRight`"
            :is-auto-back-fill="true"
            @choose="setChooseValue3"
        >
        </nut-calendar>

        <div class="border1"></div>
        <div class="border2"></div>
        <div class="border3"></div>
        <div class="border4"></div>
        <div class="tips">! 红色为已交订项，不可排队；蓝色为已预定项，可继续排队</div>
    </div>
    

    
    

    <div class="container container-bg">
        
         <div class="schedule">
            <div class="title">选择档期</div>
            <div class="list">
                <ul>
                    <li v-for="(vo,i) in field_list" :key="i">
                        <nut-row justify="space-between">
                            <nut-col :span="5">
                                <div>{{vo.title}}</div>
                            </nut-col>
                            <nut-col :span="11">
                                <div>{{vo.day}}</div>
                            </nut-col>
                            <nut-col :span="5">
                                <div>{{vo.name}}</div>
                            </nut-col>
                            <nut-col :span="3">
                                <div><img @click="delList(i,vo.days,vo.venueId,vo.screening)" src="../../assets/icon/jian.png"></div>
                            </nut-col>
                        </nut-row>
                        
                    </li>
                </ul>
                
            </div>
        </div> 

        <div class="input-list">
            <nut-textinput 
                v-model="reservePerson"
                label="预定客户"
                placeholder="请填写预定客户企业名称"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />

            <nut-textinput 
                v-model="meetingType"
                label="会议类型 "
                placeholder="请填写类型，如“培训会”"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />
            <nut-textinput 
                v-model="clientVocation"
                label="客户行业"
                placeholder="请填写类型，如“教育行业”"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />
            <nut-textinput 
                v-model="meetingNumber"
                label="会议人数"
                placeholder="请填写人数，如“100-200人”"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />
            <nut-textinput 
                v-model="budget"
                label="预算金额"
                placeholder="请填写您的预算金额"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />

            <label class="nut-textinput baifang" placeholder="请选择摆放形式"><span class="nut-textinput-label">摆放形式</span> 
            <select v-model="putFormlist">
                <option :value="vo.id" v-for="(vo,i) in putForm" :key="i" v-show="vo.b_type == 3">{{vo.b_name}}</option>
            </select>
             </label>

            
            <nut-textinput 
                v-model="commentinfo"
                label="备注"
                placeholder="请填写你的其他需求"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />
        </div>
   

       

        <div class="reserve">
            <div class="reserve-title">预定状态</div>
            <nut-radiogroup class="" v-model="radioGroupVal1">
                <nut-radio label="1">预定</nut-radio>
                <nut-radio label="2">交订</nut-radio>
            </nut-radiogroup>
        </div>
        
    </div>
    
    <nut-dialog class="riqi" :title="popup.title + '&nbsp;&nbsp;&nbsp;&nbsp;' + popup.day" :visible="dialogShow" @ok-btn-click="setOkPlete" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">

        <div class="checkbox-list" v-for="(vo,index) in popup.list" :key="index">
            <div class="state" :class="{'red':vo.state==2,'blue':vo.state == 1}"></div>
            <div class="title">{{vo.name}}</div>
            <div class="title" v-if="vo.state == 2">{{vo.remark}}</div>
            <div class="title" v-for="(no,i) in vo.remark" :key="i" v-show="vo.state == 1">
                {{no.memo_name}}
            </div>
            <!-- <div class="info">{{vo.msg}}</div> -->

            <nut-checkbox 
                v-if="vo.state == 0"
                class="morning-checkbox"
                @change="getChange($event)"
                v-model="vo.checked"
               >
            </nut-checkbox>

            <nut-checkbox 
                v-if="vo.state == 2"
                class="morning-checkbox"
                @change="getChange($event)"
                v-model="vo.checked"
                disabled
               >
            </nut-checkbox>

            <nut-checkbox 
                v-if="vo.state == 1"
                class="morning-checkbox"
                @change="getChange($event)"
                v-model="vo.checked"
               >
            </nut-checkbox>
        </div>
    </nut-dialog> 

    <div class="button_zu">
        <div class="button-pa">
        <button class="quxiao" @click="addCancel">取消预约</button>
        </div>
        <div class="button-pa">
        <button class="next" @click="addData">确认提交</button>
        </div>
    </div>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { getListApi, getDetailsByIdApi } from '../../api/theater'
  import { IconUrl } from '../../utils/auxiliary'
  import $ from 'jquery'

  export default {
    data () {
      return {
        activeClass:0,//默认显示的会场
        activeID:"",//会场id
        activeText:"",//会场名称
        fieldList:[],//头部会场列表
        end_data:"",//结束时间
        isVisible3: true,//日历控件启用
        date3: null,//默认时间

        /* 日历下基础信息录入 */
        enddata:"",//日历可选时间
        reservePerson:"",//预定客户
        meetingType:"",//会议类型
        clientVocation:"",//客户行业
        meetingNumber:"",//会议人数
        budget:"",
        putForm:[
            
        ],//摆放形式数组
        putFormlist:"",//摆放形式
        commentinfo:"",//备注
        radioGroupVal1:"2",//预定状态
        dialogShow: false,//弹窗事件

        /* 选择档期 */
        field_list:[],
        /* 选择过的数据 */
        old_data:[],

        /* 判断日历弹窗是否弹出参数*/
        calendar:0,
        
        /* 日历数组判断 */
        day_data:[],
        
        riqitype:"",
        parentId:"",//上级id

        /* 弹窗 */
        popup:{
            title:"场地一",
            day:"2019年07月20日",
            days:"",
            activeID:"",
            screening:"",
            list:[
            ]
        },//弹窗变量
      }
    },

    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },


    async mounted () {
        this.getSessionByVenueId()
        this.tihuanField()
        this.getdata()
        this.getorderCon()
        this.rilinew()
        this.isMobile()
        setTimeout(this.getdays,1000)
    },
   

    methods: {
        rilinew(){
            const _this = this
            $('.nut-calendar-months-panel').on('touchend',function(){
                let num = $(".nut-calendar-month").length
                if(_this.outdata_len != num){
                    _this.outdata_len = num
                    _this.deltype()
                    _this.outdata.forEach(element=>{
                        let addday = element.date
                        let type1 = element.list[0].type0
                        let type2 = element.list[0].type1
                        let type3 = element.list[0].type2
                        
                        _this.hongdianAdd(addday,type1,type2,type3)
                    })

                }
            })
        },
        getorderCon(){
            let orderId = this.$route.query.id
            this.$http.get(this.$url + '/inf/venue/getVenueOrderIdOne',{
                params:{
                    orderId:orderId,
                    salesman:this.userInfo.userId//a6efabd1-7ded-4133-91a5-4753ad9200ed,
                }
            })
            .then(response => {
                this.old_data = JSON.parse(response.data.team_data)
                this.field_list =JSON.parse(response.data.team_data1)
                this.removerClass()
                this.reservePerson = response.data.reserve_person
                this.meetingType = response.data.meeting_type
                this.meetingNumber = response.data.meeting_number

                this.budget = response.data.budget
                this.clientVocation = response.data.client_vocation
                this.putFormlist = response.data.put_form
                this.commentinfo = response.data.commentinfo
            })
        },//获取old_data
       
        more(){
           this.$router.push('/appointment')
        },//头部更多跳转
        getdays(){
            this.$http.get(this.$url + '/inf/venue/year',{
                params:{
                    venueId:this.activeID,
                }
            })
            .then(response => {
                this.deltype()
                let outdata = []
                outdata = response.data.flag.list
                console.log(outdata)
                outdata.forEach(element=>{
                    let addday = element.date
                    let type1 = element.list[0].type0
                    let type2 = element.list[0].type1
                    let type3 = element.list[0].type2
                    this.hongdianAdd(addday,type1,type2,type3)
                })
            })
            
            // let addday = "2019-11-30"
            // let type1 = "0"
            // let type2 = "1"
            // let type3 = "2"
            // this.hongdianAdd(addday,type1,type2,type3)
        },
        getdata(){
            let nowDate = new Date();
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
            }
            let timetableId = date.year + "-" + date.month + "-" + date.date;
            this.enddata = this.computeYmd(timetableId, 12);
        },//结束时间推算
        computeYmd(val, n) {
            let str = val.split('-');
            let d = new Date(str[0], str[1], str[2]);
            d.setMonth((d.getMonth()-1) + n);
           let yy1 = d.getFullYear();
            let mm1 = d.getMonth()+1;
            let dd1 = d.getDate()+1;
            if(dd1 == '00'){
            mm1 = parseInt(mm1)-1;
            let new_date = new Date(yy1,mm1,1);
            dd1 = (new Date(new_date.getTime()-1000*60*60*24)).getDate()
            }
            if (mm1 < 10 ) {
            mm1 = '0' + mm1;
            }
            if (dd1 < 10) {
            dd1 = '0' + dd1;
            }
            return yy1 + '-' + mm1 + '-' + dd1;
        },//获取xx个月后的时间

        getSessionByVenueId(){
            this.$http.post(this.$url + '/inf/venue/list')
            .then(response => {
                this.fieldList = response.data.list;
                this.activeID = response.data.list[0].venue_id;
                this.activeText = response.data.list[0].venue_title;
                this.parentId = response.data.list[0].parent_id;
            })
        },//获取头部会场信息

        getItme123:function(index,id,parent_id,title) {
            this.activeClass = index;  // 把当前点击元素的index，赋值给activeClass
            this.activeText = title;
            this.popup.activeID = id;
            this.activeID = id;
            this.parentId = parent_id;
            
            this.removerClass()
            this.getdays()
        },//点击切换会场


        setChooseValue3(param) {

            if(this.parentId == 0){
                if(this.field_list.length == 0){
                    this.calendar = 0
                }
                this.field_list.forEach(e => {
                    if(param[3] == e.days && this.activeID == e.parentId){
                        this.$dialog({
                                lockBgScroll:true,
                                content:"您已选择了此"+ e.title +"所包含的下级档期，请取消"+ e.title +"下级场地档期再进行选择",
                                noOkBtn:true,
                                cancelBtnTxt:"我知道了"
                        });
                        this.calendar = 1
                    }else{
                        this.calendar = 0
                    }
                });

            }else{
                if(this.field_list.length == 0){
                    this.calendar = 0
                }
                this.field_list.forEach(e => {
                    if(param[3] == e.days && this.parentId == e.parentId){
                        this.calendar = 0
                    }else{
                        this.$dialog({
                                lockBgScroll:true,
                                content:"您已选择了" + e.title + "所包含的上级档期，请取消" + e.title + "上级场地档期再进行选择",
                                noOkBtn:true,
                                cancelBtnTxt:"我知道了"
                        });
                        this.calendar = 1
                    }
                });
            }

            if(this.calendar == 0){
                let time = param[0] + "年" + param[1] + "月" + param[2] + "日"
                let day_data = []
                // let id_data = []
                this.old_data.forEach(element => {
                    day_data.push(element.day+element.activeID)
                    // id_data.push(element.activeID)
                })
                if(day_data.indexOf(time+this.activeID) != -1){
                        for(var i=0;i<this.old_data.length;i++){
                            if(this.old_data[i].day == time && this.old_data[i].activeID == this.activeID){
                                this.popup.title = this.activeText,
                                this.popup.day = time,
                                this.popup.days = param[3]
                                this.popup.activeID = this.activeID,
                                this.popup.list = this.old_data[i].list,
                                this.day_data = param
                                this.dialogShow = true
                            }
                        }
                }else{
                    
                
                        
                    this.$http.get(this.$url + '/inf/venue/venueByIdOrderInfo',{
                        params:{

                            venueId:this.activeID,
                            startTime:param[3]
                        }
                        })
                        .then(response => {
                            if(response.data.flag == 3){
                                this.popup.title = this.activeText,
                                this.popup.day = time,
                                this.popup.days = param[3]
                                this.popup.activeID = this.activeID,
                                this.popup.list = response.data.reserve_day.list,
                                this.dialogShow = true
                                this.day_data = param
                            }else{
                                alert("当天没有档期")
                            }
                            
                            // console.log(this.day_data)
                        })
            

                }
            }
            

            
        },//日历点击切换

        jinmoValue3(param,day) {
            let time = param[0] + "年" + param[1] + "月" + param[2] + "日"
            let day_data = []
            let id_data = []
            this.old_data.forEach(element => {
                day_data.push(element.day)
                id_data.push(element.activeID)
            })
            if(day_data.indexOf(time) != -1 && id_data.indexOf(this.activeID) != -1){
                    for(var i=0;i<this.old_data.length;i++){
                        if(this.old_data[i].day == time && this.old_data[i].activeID == this.activeID){
                            this.popup.title = this.activeText,
                            this.popup.day = time,
                            this.popup.days = day
                            this.popup.activeID = this.activeID,
                            this.popup.list = this.old_data[i].list,
                            this.day_data = param
                        }
                    }
            }else{
                this.$http.get(this.$url + '/inf/venue/venueByIdOrderInfo',{
                params:{
                    venueId:this.activeID,
                    startTime:day
                }
                })
                .then(response => {
                    if(response.data.flag == 3){
                        this.popup.title = this.activeText,
                        this.popup.day = time,
                        this.popup.days = day
                        this.popup.activeID = this.activeID,
                        this.popup.list = response.data.reserve_day.list,
                        this.day_data = param
                    }else{
                        alert("当天没有档期")
                    }
                    
                    // console.log(this.day_data)
                })
            }

            
        },//静默获取
        
        setOkPlete(){
            if(this.field_list.length == 0){
                let alldata = []
                this.popup.list.forEach(element=>{
                    if(element.checked == true){
                        let data = {
                            title:"",
                            day:"",
                            name:"",
                            venueId:"",
                            days:"",
                            screening:"",
                            reserveDay:"",
                            parentId:""
                        }
                        data.title = this.activeText,
                        data.day = this.popup.day,
                        data.name = element.name,
                        data.venueId = this.activeID
                        data.days = this.popup.days
                        data.parentId = this.parentId

                        data.screening = element.screening
                        data.reserveDay = this.popup.days
                        this.field_list.push(data);
                    }
                })
                let newdata = this.popup
                newdata = JSON.parse(JSON.stringify(newdata))
                this.old_data.push(newdata)
                
                let gaolian = []
                this.field_list.forEach(element=>{
                    gaolian.push(element.day + element.venueId)
                })
                if(gaolian.indexOf(this.popup.day + this.popup.activeID) != -1){
                    this.ceshijquery(this.popup.days,true)
                }else{
                    this.ceshijquery(this.popup.days,false)
                }
                
                this.dialogShow = false
            }else{
                let day_data = []
                let id_data = []
                let screening = []
                
                console.log(this.field_list)

                for(var i =0;i<this.field_list.length;i++){
                    if(this.field_list[i].day == this.popup.day && this.field_list[i].venueId == this.activeID){
                        this.$delete(this.field_list,[i])
                        i--
                    }
                }
                // console.log(this.field_list)
                
                this.popup.list.forEach(element=>{
                    if(element.checked == true){
                        let data = {
                            title:"",
                            day:"",
                            name:"",
                            venueId:"",
                            days:"",
                            screening:"",
                            reserveDay:"",
                            parentId:""
                        }
                        data.title = this.activeText,
                        data.day = this.popup.day,
                        data.name = element.name,
                        data.venueId = this.activeID
                        data.days = this.popup.days
                        data.parentId = this.parentId

                        data.screening = element.screening
                        data.reserveDay = this.popup.days
                        this.field_list.push(data)
                    }
                }) 

                let newdata = this.popup
                newdata = JSON.parse(JSON.stringify(newdata))
                this.old_data.push(newdata)
                
                let gaolian = []
                this.field_list.forEach(element=>{
                    gaolian.push(element.day + element.venueId)
                })
                if(gaolian.indexOf(this.popup.day + this.popup.activeID) != -1){
                    this.ceshijquery(this.popup.days,true)
                }else{
                    this.ceshijquery(this.popup.days,false)
                }

                this.dialogShow = false
                // }
            }
            
        },//弹窗确定按钮


        gotoSchedule(id){
            this.$router.push('/introduce?id='+ id)
        },//会场点击跳转详情

        tihuanField(){
            this.$http.get(this.$url + '/inf/venue/getVenueConfigDecorate',{
            })
            .then(response => {
                this.putForm = response.data
            })
        },//获取摆放形式

        getSession(){
           
        },//选择档期

        getChange(e){
        },//单选框点击事件

        ceshijquery(day,ztai){
            console.log(ztai);
            const _this = this
            var arr=day.split('-');//分割时间
            var dantian = arr[0] + "年" + arr[1] + "月";//写入年月日
            switch(arr[2]){
                case "01":
                arr[2] = 1;
                break;
                case "02":
                arr[2] = 2;
                break;
                case "03":
                arr[2] = 3;
                break;
                case "04":
                arr[2] = 4;
                break;
                case "05":
                arr[2] = 5;
                break;
                case "06":
                arr[2] = 6;
                break;
                case "07":
                arr[2] = 7;
                break;
                case "08":
                arr[2] = 8;
                break;
                case "09":
                arr[2] = 9;
                break;
            }
            var i = 0;//开始循环
            var rili = $(".nut-calendar-month").length;
            for(i=0;i<rili;i++){
                var a = $(".nut-calendar-month").eq(i).children(".nut-calendar-month-title").html();//获取日历里面有什么时间
                if(a == dantian){
                    var n = 0;
                    var rilidays = $(".nut-calendar-month").eq(i).find(".nut-calendar-month-day").length;
                    for(n=0;n<rilidays;n++){
                        var jingtian = $(".nut-calendar-month").eq(i).find(".nut-calendar-month-day").eq(n).find("span").html();
                        // console.log("当前日期：" + jingtian);
                        if(jingtian == arr[2]){
                            
                            if(ztai == true){
                                 $(".nut-calendar-month").eq(i).find(".nut-calendar-month-day").eq(n).find("span").addClass("riliactive");
                            }else if(ztai == false){
                                $(".nut-calendar-month").eq(i).find(".nut-calendar-month-day").eq(n).find("span").removeClass("riliactive");
                            }
                           
                        }
                    }
                    
                }
            }
        },//日历高亮方法
        removerClass(){
            $(".riliactive").removeClass("riliactive");
            const _this = this
            var i = 0;
            for(i=0;i<this.field_list.length;i++){
                if(this.field_list[i].venueId == this.activeID){
                    var arr=this.field_list[i].days.split('-');//分割时间
                    var dantian = arr[0] + "年" + arr[1] + "月";//写入年月日
                    switch(arr[2]){
                        case "01":
                        arr[2] = 1;
                        break;
                        case "02":
                        arr[2] = 2;
                        break;
                        case "03":
                        arr[2] = 3;
                        break;
                        case "04":
                        arr[2] = 4;
                        break;
                        case "05":
                        arr[2] = 5;
                        break;
                        case "06":
                        arr[2] = 6;
                        break;
                        case "07":
                        arr[2] = 7;
                        break;
                        case "08":
                        arr[2] = 8;
                        break;
                        case "09":
                        arr[2] = 9;
                        break;
                    }
                    var rili = $(".nut-calendar-month").length;
                    var n = 0;
                    for(n=0;n<rili;n++){
                        var a = $(".nut-calendar-month").eq(n).children(".nut-calendar-month-title").html();//获取日历里面有什么时间
                        if(a == dantian){
                            var m = 0;
                            var rilidays = $(".nut-calendar-month").eq(n).find(".nut-calendar-month-day").length;
                            for(m=0;m<rilidays;m++){
                                var jingtian = $(".nut-calendar-month").eq(n).find(".nut-calendar-month-day").eq(m).find("span").html();
                                if(jingtian == arr[2]){
                                
                                  $(".nut-calendar-month").eq(n).find(".nut-calendar-month-day").eq(m).find("span").addClass("riliactive");
                                }
                            }
                            
                        }
                    }
                }
               
            }
            
        },//会场切换日历高亮方法
        deltype(){
            $(".nut-calendar-month-day").find(".biaoqian").remove()
        },
        hongdianAdd(day,type1,type2,type3){
            if(type1 == 0){
                type1 = "mo"
            }else if(type1 == 1){
                type1 = "blue"
            }else if(type1 == 2){
                type1 = "red"
            }

            if(type2 == 0){
                type2 = "mo"
            }else if(type2 == 1){
                type2 = "blue"
            }else if(type2 == 2){
                type2 = "red"
            }

            if(type3 == 0){
                type3 = "mo"
            }else if(type3 == 1){
                type3 = "blue"
            }else if(type3 == 2){
                type3 = "red"
            }
            //判断
            const _this = this
            var arr=day.split('-');//分割时间
            var dantian = arr[0] + "年" + arr[1] + "月";//写入年月日
            switch(arr[2]){
                case "01":
                arr[2] = 1;
                break;
                case "02":
                arr[2] = 2;
                break;
                case "03":
                arr[2] = 3;
                break;
                case "04":
                arr[2] = 4;
                break;
                case "05":
                arr[2] = 5;
                break;
                case "06":
                arr[2] = 6;
                break;
                case "07":
                arr[2] = 7;
                break;
                case "08":
                arr[2] = 8;
                break;
                case "09":
                arr[2] = 9;
                break;
            }
            var i = 0;//开始循环
            var rili = $(".nut-calendar-month").length;
            for(i=0;i<rili;i++){
                var a = $(".nut-calendar-month").eq(i).children(".nut-calendar-month-title").html();//获取日历里面有什么时间
                
                if(a == dantian){
                    var n = 0;
                    var rilidays = $(".nut-calendar-month").eq(i).find(".nut-calendar-month-day").length;
                    for(n=0;n<rilidays;n++){
                        var jingtian = $(".nut-calendar-month").eq(i).find(".nut-calendar-month-day").eq(n).find("span").html();
                        // console.log("当前日期：" + jingtian);
                        if(jingtian == arr[2]){
                            $(".nut-calendar-month").eq(i).find(".nut-calendar-month-day").eq(n).append("<div class='biaoqian rili_type "+ type1 +"'></div><div class='biaoqian rili_type1 "+ type2 +"'></div><div class='biaoqian rili_type2 "+ type3 +"'></div>");
                        }
                    }
                    
                }
            }
        },//日历红点提示

        addData(){
            if(this.reservePerson == ""){
                alert("请填写预定客户");
                return false;
            }
            if(this.field_list == ""){
                alert("您还未选择预定场地与时间");
                return false;
            }
            let orderId = this.$route.query.id
            console.log(this.putFormlist)
            // this.$http.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';  //此处是增加的代码，设置请求头的类型
            this.$http.post(this.$url + '/inf/venue/add',{
                    venueOrderId:orderId,
                    reservePerson:this.reservePerson,
                    commentinfo:this.commentinfo,
                    meetingType:this.meetingType,
                    meetingNumber:this.meetingNumber,
                    state:this.radioGroupVal1,
                    clientVocation:this.clientVocation,
                    salesman: this.userInfo.userId,
                    putForm:this.putFormlist,
                    budget:this.budget,
                    tbVenueOrderSession:this.field_list,
                    teamData:JSON.stringify(this.old_data),
                    teamData1:JSON.stringify(this.field_list)
            })
            .then(response => {
                if(response.data.flag == "3"){
                    // this.$router.push('/appointment')
                }else{
                    alert(response.data.msg);
                }
            })
        },//提交数据
        back(){
            this.$router.go(-1);//返回上一层
        },
        delList(id,day,vid,screening){
            this.$delete(this.field_list,[id])
            for(var i=0;i<this.old_data.length;i++){
                if(this.old_data[i].days == day && this.old_data[i].activeID == vid){
                    for(var n=0;n<this.old_data[i].list.length;n++){
                        if(this.old_data[i].list[n].screening == screening){
                            this.old_data[i].list[n].checked = false
                        }
                    }
                }
            }
        },//单行删除

        addCancel(){
            let orderId = this.$route.query.id
            this.$http.get(this.$url + '/inf/venue/cancel',{
                params:{
                    orderId:orderId,
                }
            })
            .then(response => {
                if(response.data.flag == 3){
                    alert("已取消");
                    this.$router.push('/appointment')
                }
            })
        },//取消预约
        isMobile() {
            this.flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
            console.log(this.flag);
            if(this.flag == null){
                $(".nut-calendar-months").css("overflow","auto")
            }
        }//判断是否为手机

    }
  }
</script>

<style lang="scss">
  body{
    background: #F9F9F9;
  }
  .field{
      padding:15px 15px 0 15px;
      background: #fff;
      overflow: hidden;
      .flex-content{
            border:1px solid #DDDDDD;
            padding:7px 0;
            margin-bottom:15px;
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
      }
      li{
          text-align: center;
          float: left;
          width: 25%;
          padding:0 5px;
          box-sizing: border-box;
      }
      .active{
          display: block;
          .flex-content{
            background: #B29462;
            border:1px solid #B29462;
            color:#fff;
          }
      }
  }
  
  .field_content{
    display: none;
    float: left;
    width: 100%;
    height: 80px;
    margin-top:1rem;
    padding:0 5px;
    box-sizing: border-box;
    img{
      width: 60px;
      height: 60px;
      background: #66ccff;
      float: left;
      border-radius: 5px;
    }
    
    .title-content{
      float: left;
      width: 100%;
      margin:0 0 0 5px;
      font-size: 14px;
    }
    .title-l{
      margin-top:20px;
      color:#999999;
    }
    .more{
        margin-top:42px;
        color:#999999;
    }
  }
  .field_calendar{
    position: relative;
    .nut-calendar{
        position: relative;
        height: 310px;
        z-index: 1000;
    }
    .tips{
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #fff;
        text-align: center;
        color:#999;
    }
    .border1{
        position: absolute;
        left:0px;
        top:40px;
        border-left: 1px solid #DF9924;
        width: 1px;
        height: 100px;
        z-index: 1000; 
        box-sizing: border-box;
        height: 342px;
    }
    .border2{
        position: absolute;
        right:0px;
        top:40px;
        border-left: 1px solid #DF9924;
        width: 1px;
        height: 100px;
        z-index: 1000; 
        box-sizing: border-box;
        height: 342px;
    }
    .border3{
        position: absolute;
        left:0px;
        top:40px;
        border-bottom: 1px solid #DF9924;
        width: 100%;
        height: 100px;
        z-index: 1000; 
        box-sizing: border-box;
        height: 1px;
    }
    .border4{
        position: absolute;
        left:0px;
        top:381px;
        border-bottom: 1px solid #DF9924;
        width: 100%;
        height: 100px;
        z-index: 1000;  
        box-sizing: border-box;
        height: 1px;
    }
    .nut-calendar-month-day-choose{
        background-color: #b2946294!important;
    }
    .nut-calendar-control .nut-calendar-cancel-btn, .nut-calendar-control .nut-calendar-confirm-btn{
        background: #EEEEEE;
        color:#EEEEEE;
    }
    .nut-calendar-control .nut-calendar-cancel-btn{
        color:#eee;
    }
    .nut-calendar-control .nut-calendar-title{
        background: #EEEEEE;
    }
  }

  //下面
  .field_time{
      padding:0 15px;
      margin-top:1rem;
      .field-time-content{
            background: #fff;
            overflow: hidden;
            border-radius: 5px;
            padding:15px;
            .title{
                text-align: center;
                width: 100%;
                font-size: 16px;
            }
            .morning-checkbox{
                width: 100%;
                margin:10px 0;
                float: left;
            }
            .morning{
                overflow: hidden;
                padding-bottom: 15px;
                border-bottom: 1px solid #ddd;
                margin-bottom:10px;
            }
            .list{
                width: 100%;
                float: left;
                font-size: 14px;
                margin-top:8px;
            }
            .name{
                display: block;
                float: left;
                width: 25%;
            }
            .position{
                display: block;
                float: left;
                width: 33%;
            }
            .remarks{
                display: block;
                float: left;
                width: 42%;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
      }
  }
  
  .riliactive{
    background-color: #B29462;
    color: #fff;
    width: 40px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    z-index: 1000;
  }
  .nut-calendar-months .nut-calendar-month-con .nut-calendar-month-day-active{
      background: #fff;
      color:#222;
  } 
  .input-list{
      width: 100%;
      background: #fff;
      margin-top:1rem;
      height: auto;
      border-radius: 5px;
      padding:5px 10px;
      box-sizing: border-box;
      .nut-textinput{
          padding:5px 0;
          border-top:1px solid #ddd;
          .nut-textinput-label{
              width: 55px;
          }
      }
      .nut-textinput:nth-child(1){
          border:0;
      }
  }
  .schedule{
      background: #fff;
      margin-top:1rem;
      padding:15px;
      border-radius: 5px;
      overflow: hidden;
      .title{
          margin-bottom:10px;
          font-size: 14px;
      }
      .list{
          li{
              text-align: center;
              margin-top:15px;
              .list_option{
                  width: 100%;
                  float: left;
                  margin-top:10px;
                  font-size: 14px;
              }
              img{
                  float: right;
                  width: 15px;
                  height: 15px;
              }
          }
          
      }
  }
  .reserve{
      background: #fff;
      margin-top:1rem;
      padding:15px;
      border-radius: 5px;
      overflow: hidden;
      .reserve-title{
          float: left;
          margin-right:2rem;
          font-size:14px;
      }
  }
  
  .baifang{
      select{
          -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 40px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-size: 14px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid #DDDFE6;
            background-color: '#FFFFFF';
            padding: 0 30px 0 10px;
            border:0;
            background: #fff;
      }
  }


  /*---------------------------------------------------------                         改写弹窗样式*/
  .riqi{
  .nut-checkbox input:checked{
      background-color: #B29462;
      border-color:#B29462;
      box-shadow: 0 4px 6px 0 #b294622b;
  }
  .nut-dialog-body{
      padding:0;
  }
  .nut-dialog-title{
      background: #B29462;
      color:#fff;
      padding:0.8rem 0;

  }
  .nut-dialog-content{
      padding:0 1.5rem;
  }
  .nut-dialog-ok{
      background: #fff;
      color:#222;
      border-top:1px solid #F6F6F6;
      border-left:1px solid #F6F6F6;
  }
  .nut-dialog-ok:active{
      background: #B29462;
      color:#fff;
  }
  .checkbox-list{
      border-top:1px solid #ddd;
      width: 100%;
      float: left;
      padding:1rem 0;
      .state{
          border:1px solid #999;
          width: 15px;
          height: 15px;
          border-radius: 50%;
          float: left;
          margin-top:2px;
      }
      .title{
          float: left;
          margin-top:1px;
          margin-left:10px;
      }
      .info{
          float: left;
          margin-top:1px;
          margin-left:10px;
      }
      .morning-checkbox{
          float: right;
      }
      .red{
          background: red;
          border-color: red;
      }
      .blue{
          background: #00B7EE;
          border-color: #00B7EE;
      }
  }
  .checkbox-list:nth-child(1){
      border-top:0;
  }
  .mores{
      color:#B29462;
  }

  }
  
  .button_zu{
        
        .button-pa{
            float: left;
            width: 50%;
            padding:0 1rem;
            box-sizing: border-box;
            margin:1rem 0;
        }
        .quxiao{
            width: 100%;
            border:0;
            background: #2E2F31;
            color:#fff;
            box-sizing:border-box;
            height: 40px;
        }
        .next{
            
            width: 100%;
            border:0;
            background: #B29462;
            color:#fff;
            box-sizing:border-box;
            height: 40px;
        }
  }

  .nut-calendar-month-day{
      position: relative;
  }
  .nut-calendar-month-day{
      .mo{
          
      }
      .red{
          background: red;
          border:1px solid red;
      }
      .blue{
          background: #00B7EE;
          border:1px solid #00B7EE;
      }
  }
   .rili_type{
       position: absolute;
       width: 5px;
       height: 5px;
       border-radius: 50%;
       left: 12px;
       bottom: 7px;
   }
   .rili_type1{
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        left: 24px;
        bottom: 7px;
   }
   .rili_type2{
       position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        left: 36px;
        bottom: 7px;
   }
   
</style>
